<template>
  <div class="search_form">
    <el-form
      :model="searchForm"
      :label-width="'100px'"
      :inline="searchForm.formApi.inline || true"
      style="width: 100%"
    >
      <el-form-item
        v-for="(item, index) in searchForm.formChildren"
        :key="index"
        :label="item.label"
      >
        <el-input
          v-if="item.type == 'input'"
          :style="{
            width: item.width ? item.width + 'px' : '200px'
          }"
          :size="item.size ? item.size : 'default'"
          v-model="item.value"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        />
        <el-select
          v-else-if="item.type == 'select' || item.type == 'multiple'"
          :style="{
            width: item.width ? item.width + 'px' : '200px'
          }"
          :size="item.size ? item.size : 'default'"
          v-model="item.value"
          :multiple="item.type == 'multiple'"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :collapse-tags="item.collapseTags"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        >
          <el-option
            v-for="(val, ind) in item.option"
            :key="ind"
            :label="val.label"
            :value="val.value"
          />
        </el-select>
        <el-date-picker
          v-else-if="item.type == 'datePicker'"
          :style="{
            width: item.width ? Number(item.width - 20) + 'px' : Number(240) + 'px'
          }"
          :size="item.size ? item.size : 'default'"
          v-model="item.value"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :format="item.format ? item.format : 'YYYY/MM/DD'"
          :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD'"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// 父组件传参
let props = defineProps({
  searchForm: {
    required: true,
    default: () => {
      return {
        formApi: {}
      }
    }
  }
})
let { searchForm } = props

function onSubmit() {
  let formList = [...searchForm.formChildren]
  let obj: any = {}
  formList.forEach((item) => {
    obj[item.key] = item.value
  })
  console.log('obj', obj)
}

// const searchForm = reactive({
//   formApi: {
//     inline: true,
//     labelWidth: '100px',
//     width: '200',
//     size: 'default' //  large, default, small
//   },
//   formChildren: [
//     {
//       label: 'Customer ID',
//       key: 'customerId',
//       value: '',
//       filterable: true,
//       clearable: true,
//       option: [
//         {
//           label: 'label-1',
//           value: '1'
//         },
//         {
//           label: 'label-2',
//           value: '2'
//         },
//         {
//           label: 'label-3',
//           value: '3'
//         },
//         {
//           label: 'label-4',
//           value: '4'
//         }
//       ]
//     },
//     {
//       label: 'Design Rule',
//       key: 'designRule',
//       value: '',
//       type: 'input',
//       size: 'default',
//       clearable: true
//     },
//     {
//       label: 'CD Grade',
//       key: 'cdGrade',
//       value: '',
//       type: 'input',
//       size: 'small',
//       clearable: true
//     },
//     {
//       label: 'Mask ID',
//       key: 'maskId',
//       value: '',
//       type: 'input',
//       width: '160',
//       clearable: true
//     },
//     {
//       label: '状态',
//       key: 'status',
//       value: '',
//       type: 'select',
//       width: '260',
//       clearable: true,
//       option: [
//         {
//           label: '已发货',
//           value: '1'
//         },
//         {
//           label: '未发货',
//           value: '0'
//         }
//       ]
//     },
//     {
//       label: '更新时间',
//       key: 'updateTime',
//       value: '',
//       type: 'datePicker',
//       width: '360',
//       clearable: true
//     }
//   ]
// })
</script>

<style lang="scss"></style>
